<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer {
            width: 180px;
            height: 180px;
            background: gold;
            margin: 100px auto;
            padding: 30px;
            border-radius: 50%;
        }

        .outer .center {
            width: 130px;
            height: 130px;
            padding: 30px;
            background: pink;
            border-radius: 50%;
        }

        .outer .center .inner {
            width: 130px;
            height: 130px;
            background: palevioletred;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<!-- 修饰符是vue功能的拓展，是对vue事件或者系统操作等等进行功能的补充 -->
<div id="app">
    <!--
     .self 明哲保身类型
     .self修饰符的作用是只有点击元素本身的时候才能触发事件，不接受冒泡上来的事件，同时也不能阻止事件的冒泡
     即: 点击中间层时, 中间层会向外层传递冒泡事件,但是外层因为有 .self 不会接受
     -->
    <div class="outer" @click.self="outer">
        <div class="center" @click="center">
            <!--
            .stop 一夫当关类型
            .stop修饰符的作用就是阻止事件的一个冒泡
             -->
            <div class="inner" @click.stop="inner"></div>
        </div>
    </div>
</div>
<script src="js/vue.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        methods: {
            outer() {
                alert("命中外层")
                console.log("外层")
            },
            center() {
                alert("命中中间层")
                console.log("中间")
            },
            inner(event) {
                alert("命中内层")
                /*
                .stop修饰符的作用就是阻止事件的一个冒泡
                其作用类似原生JavaScript的event.stopPropagation()方法
                */
                //event.stopPropagation();
                console.log("内层")
            }
        }
    })
</script>
</body>
</html>